<template>
<div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <el-form :inline="true" ref="quesRandomsRef" :model="quesRandomsForm" label-width="80px">
        <el-form-item label="关键字" prop="keyword">
          <el-input size="small" style="width:350px" v-model="quesRandomsForm.keyword" placeholder="根据编号搜索"></el-input>
        </el-form-item>
        <el-form-item class="btn">
          <el-button size="small" @click="resetSubmit">清除</el-button>
          <el-button size="small" type="primary" @click="onSubmit">搜索</el-button>
          </el-form-item>
        </el-form>
          <el-alert
            :title="cTitle"
            type="info"
            :closable="false"
            show-icon
            >
          </el-alert>
            <el-table
             :data="quesRandomsList"
             style="width: 100%"
              class="table">
             <el-table-column
               prop="id"
               label="编号"
                width="220">
             </el-table-column>
             <el-table-column
               prop="questionType"
               label="题型"
                width="80">
               <template slot-scope="scope">
                {{scope.row.questionType | quesType}}
               </template>
             </el-table-column>
             <el-table-column
               prop="questionIDs"
               label="题目编号"
               width="200">
               <template slot-scope="scope">
                <el-link :underline="false" type="primary" @click="getDialogList(scope.row.questionIDs[0])">{{scope.row.questionIDs[0].id}}</el-link>
               </template>
             </el-table-column>
             <el-table-column
               prop="addTime"
               label="录入时间"
                width="180">
             </el-table-column>
             <el-table-column
               prop="totalSeconds"
               label="答题时间(s)"
               >
             </el-table-column>
             <el-table-column
               prop="accuracyRate"
               label="正确率(%)"
               >
             </el-table-column>
             <el-table-column
               prop="userName"
               label="录入人"
               >
             </el-table-column>
             <el-table-column
              label="操作"
               width="80">
              <template slot-scope="scope">
                 <el-button plain type="danger" icon="el-icon-delete" circle @click="delQuesRandoms(scope.row)"></el-button>
              </template>
             </el-table-column>
           </el-table>
             <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pagesize"
              layout="prev,pager,next,sizes,jumper"
              :total="total"
              class="pagination">
            </el-pagination>
            <el-dialog
               title="题目预览"
               :visible.sync="isShowPreviewDialog"
               width="50%"
               >
               <el-descriptions :column="4" :colon="false">
                  <el-descriptions-item label="【题型】：">{{dialogList.questionType | quesType}}</el-descriptions-item>
                  <el-descriptions-item label="【编号】：">{{dialogList.id}}</el-descriptions-item>
                  <el-descriptions-item label="【难度】：">{{dialogList.difficulty | difficulty}}</el-descriptions-item>
                  <el-descriptions-item label="【标签】：">{{dialogList.tags}}</el-descriptions-item>
                  <el-descriptions-item label="【学科】：">{{dialogList.subjectName}}</el-descriptions-item>
                  <el-descriptions-item label="【目录】：">{{dialogList.directoryName}}</el-descriptions-item>
                  <el-descriptions-item label="【方向】：">{{dialogList.direction}}</el-descriptions-item>
              </el-descriptions>
                  <hr/>
              <span v-html="`【题干】：${dialogList.question}`"></span>
                  <br/>
              <div v-if="dialogList.questionType==='1'">{{dialogList.questionType | quesType}}题 选项：（以下选中的选项为正确答案）
               <div v-for="item in dialogList.options" :key="item.id" >
                   <el-radio :key="item.id" :value="item.code" v-if="item.isRight===0">{{item.title}}</el-radio>
                   <el-radio v-else>{{item.title}}</el-radio>
               </div>
              </div>
              <div v-if="dialogList.questionType==='2'">{{dialogList.questionType | quesType}}题 选项：（以下选中的选项为正确答案）
               <div v-for="item in dialogList.options" :key="item.id">
                   <el-checkbox :key="item.id" :value="item.code" v-if="item.isRight===0">{{item.title}}</el-checkbox>
                   <el-checkbox v-else :key="item.id" checked>{{item.title}}</el-checkbox>
               </div>
              </div>
                  <hr/>
              <span>【参考答案】：</span><el-button  type="danger" @click="isShowVideo = true">视频答案预览</el-button>
                  <hr/>
              <span v-html="`【答案解析】：${dialogList.answer}`"></span>
                  <hr/>
              <span>【题目备注】：{{dialogList.remarks}}</span>
               <span slot="footer" class="dialog-footer">
                 <el-button type="primary" @click="isShowPreviewDialog = false">关闭</el-button>
               </span>
             <div v-if="isShowVideo" class="videoBox">
              <video class="video" :src="dialogList.videoURL" controls autoplay>
             </video>
             </div>
             </el-dialog>
        </el-card>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
import { questionType, difficulty } from '@/api/hmmm/constants'

export default {
  name: 'QuestionsRandoms',
  data () {
    return {
      quesRandomsForm: {
        keyword: ''
      },
      quesRandomsList: [],
      page: 1,
      pagesize: 20,
      total: 40,
      isShowPreviewDialog: false,
      isShowVideo: false,
      dialogList: {
        subjectID: '',
        difficulty: '',
        questionType: '',
        tags: '',
        province: '',
        city: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: ''
      }
    }
  },
  created () {
    this.randoms()
  },
  computed: {
    cTitle () {
      return `数据一共${this.total}条`
    }
  },
  filters: {
    quesType (cellValue) {
      const obj = questionType.find(item => item.value === Number(cellValue))
      return obj ? obj.label : ''
    },
    difficulty (cellValue) {
      const obj = difficulty.find(item => item.value === Number(cellValue))
      return obj ? obj.label : ''
    }
  },
  methods: {
    async getDialogList (row) {
      this.isShowPreviewDialog = true
      const res = await detail({ id: row.id })
      this.dialogList = res.data
    },
    resetForm () {
      this.$refs.quesRandomsRef.resetFields()
    },
    resetSubmit () {
      this.resetForm()
    },
    onSubmit () {
      this.$refs.quesRandomsRef.validate(valid => {
        if (!valid) return
        this.randoms()
        this.page = 1
        this.resetForm()
      })
    },
    async randoms () {
      const keyword = this.quesRandomsForm.keyword
      const { data: res } = await randoms({ keyword, page: this.page, pagesize: this.pagesize })
      this.quesRandomsList = res.items
      this.total = res.counts
    },
    async delQuesRandoms (row) {
      const confirmRes = await this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmRes === 'cancel') return this.$message('已取消删除')
      if (this.quesRandomsList.length === 1) {
        this.page--
        if (this.page < 1) {
          this.page = 1
        }
      }
      await removeRandoms(row)
      this.randoms()
      this.$message.success('删除题组成功')
    },
    handleSizeChange (newPagesize) {
      this.pagesize = newPagesize
      this.randoms()
    },
    handleCurrentChange (newPage) {
      this.page = newPage
      this.randoms()
    }
  }
}
</script>

<style lang='scss' scoped>
.table {
 margin-top: 15px;
}
.app-container {
    padding: 10px;
}
.btn {
float: right;
}
.pagination {
 float: right;
 margin: 20px 0;
}
.videoBox {
width:400px;
height:300px;
}
.video {
 width: 100%;
 height: 100%;
}
.dialog-footer {
display: flex;
justify-content: flex-end;
}

</style>
